<template>
	<div>
		<el-alert title="添加商品" type="info" center :closable="false" show-icon>
		</el-alert>
		<!-- 步骤条 -->
		<el-steps :align-center="true" :active="active - 0" finish-status="success">
			<el-step title="基本信息"></el-step>
			<el-step title="商品参数"></el-step>
			<el-step title="商品属性"></el-step>
			<el-step title="商品图片"></el-step>
			<el-step title="商品内容"></el-step>
			<el-step title="完成"></el-step>
		</el-steps>
		<!-- 主体选项卡 -->
		<el-tabs :before-leave="onBeforeLeave" tab-position="left" v-model="active">
			<el-tab-pane
				v-for="(item, index) in navs"
				:name="index + ''"
				:key="item.name"
				:label="item.label"
			>
				<component
					:isChangeQing.sync="isChangeQing"
					:is="item.name"
				></component>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import mixins from './AddGoos_mixins'
export default {
	mixins: [mixins],
	methods: {
		onBeforeLeave(index) {
			return index <= this.isChangeQing
		},
	},
	watch: {
		isChangeQing(val) {
			this.active = val + ''
		},
	},
}
</script>

<style>
</style>